<template>
    <div class="container"> 
        <div class="warp">
            <el-form :model="ArticleForm" :rules="rules" ref="ArticleForm" label-width="100px" class="demo-ruleForm">
        
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="ArticleForm.title"></el-input>
                </el-form-item>
        
                <el-form-item label="封面" prop="frontImage">
                    <UpLoadImg :action="action" :dialogImageUrl="ArticleForm.frontImage" @Sendimg="sendimg1" ref="uploadimg" :fileList="fileList"></UpLoadImg>
                </el-form-item>

                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" v-model="ArticleForm.descr"></el-input>
                </el-form-item>
                
                <el-form-item label="背景图" prop="backgroundImage">
                    <UpLoadImg :action="action" :dialogImageUrl="ArticleForm.backgroundImage" @Sendimg1="sendimg2" ref="uploadimg" :fileList="fileList"></UpLoadImg>
                </el-form-item>
        
                <el-form-item label="创建时间" prop="createTime">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ArticleForm.createTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
        
                <el-form-item label="文章内容" prop="content">
                    <WangEditor :introduction="ArticleForm.content" @sendEditor="handlEditor" ref="wangedit"></WangEditor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('SongFrom')">确定</el-button>
                    <el-button @click="resetForm('SongForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </template>
  
<script>
import UpLoadImg from '@/components/Background/UpLoadImg/uploadimg.vue'
import WangEditor from '@/components/WangEditor.vue'
import { mapState} from 'vuex'
export default {
    components:{
        WangEditor,
        UpLoadImg,
    },
    data() {
        return {
            action:this.$baseUrl +'/files/ArticleCoverImgUpload',
            fileList:[],
            fileList1:[],
            ArticleForm: {
                title:'',
                backgroundImage: '',
                createTime:'',
                frontImage: '',
                content:'',
                descr:''
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                createTime: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            }
        }
    },
    methods:{
        async submitForm(){
            if(this.title == "添加"){
                const res = await this.$axios.post("article/AddArticle",this.ArticleForm)
                console.log(res)
                if(res.code == 200){
                    this.$router.push("/layout/articldetl")
                    this.$message.success(res.msg)
                }
            }
            else{
                const ase = await this.$axios.put("article/UpdateArticle",this.ArticleForm)
                console.log(ase)
                this.$router.push("/layout/articldetl")
                this.$message.success(ase.msg)
            }
        },
        handlEditor(val){
            this.ArticleForm.content = val
            console.log(val)
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.$refs.uploadimg.clear()
            this.$refs.wangedit.editor.clear()
        },
        sendimg1(val){
            console.log("-----------------")
            console.log(val)
            this.ArticleForm.frontImage = val
        },
        sendimg2(val){
            this.ArticleForm.backgroundImage = val
        }
    },
    created(){
        if(this.title == "编辑"){
            console.log(this.title)
            this.SongForm = this.SongData
            this.fileList.push({name:'',url:this.SongForm.image})
            this.$nextTick(()=>{
            this.$refs.wangedit.html=this.SongForm.lyric
        })
            this.fileList1.push({name:'',url:this.SongForm.url})
        }
    },
    computed:{
        ...mapState('song1',['SingerId']),
        ...mapState('SongDatas',['title','SongData'])
    }
}
</script>
  
<style lang="less" scoped>
.container{
    height: 100%;
    width: 100%;
    padding-top: 100px;
    .warp{
        width: 80%;
        margin: 0 50px;
    }
}
</style>